<template>
	<div class="container">
		<div class="info">
			<img class="photo" :src="defaultAvatar">
			<div class="name">米耀华</div>
			<div class="desc">远处的霓虹灯亮了，像一道道亮丽的彩虹。</div>
			<div class="img-container">
				<img class="images" src="../../static/images/contact/qq.png">
				<img class="images" src="../../static/images/contact/wx.png">
				<img class="images" src="../../static/images/contact/wz.png">
				<img class="images" src="../../static/images/contact/yx.png">
			</div>
			<div class="fenge"></div>
			<div class="cards">
				<div class="cards_info">
					<img class="images" src="../../static/images/contact/qq.png">
					<div class="ml10">企鹅</div>
				</div>
				<div class="cards_value">2542571191</div>
			</div>
			<div class="cards">
				<div class="cards_info">
					<img class="images" src="../../static/images/contact/wx.png">
					<div class="ml10">微信</div>
				</div>
				<div class="cards_value">local_myh</div>
			</div>
			<div class="cards">
				<div class="cards_info">
					<img class="images" src="../../static/images/contact/wz.png">
					<div class="ml10">网站</div>
				</div>
				<div class="cards_value">https://www.cat61.com</div>
			</div>
			<div class="cards">
				<div class="cards_info">
					<img class="images" src="../../static/images/contact/yx.png">
					<div class="ml10">邮箱</div>
				</div>
				<div class="cards_value">2542571191@qq.com</div>
			</div>

		</div>
	</div>
</template>

<script setup>
	import {
		defaultAvatar
	} from '../../config/index.js'
</script>

<style scoped lang="scss">
	.container {
		.info {
			margin-top: 150rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.photo {
				width: 200rpx;
				height: 200rpx
			}

			.name {
				color: #000;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: 600;
			}

			.desc {
				color: #000;
				margin-top: 25rpx;
				font-size: 25rpx;
				font-weight: 400;
			}

			.fenge {
				width: 60%;
				height: 2rpx;
				border-bottom: 1px solid #999;
				margin: 60rpx 0
			}

			.img-container {
				width: 25%;
				display: flex;
				justify-content: space-between;
				margin-top: 25rpx;
			}

			.images {
				width: 30rpx;
				height: 30rpx
			}

			.cards {
				width: 80%;
				height: 70rpx;
				font-size: 25rpx;
				color: #000;
				background: #eee;
				margin-bottom: 35rpx;
				display: flex;
				align-items: center;
				padding: 0 20rpx 0 50rpx;
				box-sizing: border-box;

				.cards_info {
					width: 25%;
					display: flex;
					align-items: center;
				}

				.ml10 {
					margin-left: 10rpx;
				}

				.cards_value {
					width: 60%;
				}
			}
		}
	}
</style>
